import React, { useState, useEffect } from 'react';
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { Button, Radio, Divider } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import { Modal } from 'antd';
import { connect } from 'react-redux';
import './index.less';
import DelModel from '../../../components/DelModel';
import AddModel from '../../../components/AddModel';
import EditModel from '../../../components/EditModel';
import { Input } from 'antd';

export const index = ({ customerlist, dispatch }: any) => {
  const { Search } = Input;
  useEffect(() => {
    dispatch({ type: 'kefu/GET_KEFU' });
  }, []);

  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 点击删除
  const [delModalshow, setdelModalshow] = useState(false);
  const [delIndex, setIndex] = useState(0);
  const [delkefuName, setdelkefuName] = useState('');
  const closeDelModel = (data: any) => {
    console.log(data);
    setdelModalshow(data);
  };
  const del = (item: any, index: any) => {
    setdelModalshow(true);
    console.log(index);
    setIndex(index);
    setdelkefuName(item.kefu_name);
  };
  //  点击添加
  const [addModelshow, setaddModelshow] = useState(false);
  const addfn = () => {
    setaddModelshow(true);
  };
  // 关闭新增弹框
  const closeAddModel = (data: any, value: any) => {
    setaddModelshow(data);
    dispatch({ type: 'kefu/ADD', payload: { ...value } });
  };
  // 点击编辑
  const [editModel, seteditModel] = useState(false);
  const [editItem, seteditItem] = useState('');
  const [editIndex, seteditIndex] = useState(0);
  const edit = (item: any, index: any) => {
    // 打印的是一个对象
    // console.log(index)
    // 打开弹框
    seteditModel(true);
    seteditIndex(index);
    seteditItem(item);
  };
  // 关闭弹框
  const closeedit = () => {
    seteditModel(false);
  };
  const columns = [
    {
      title: 'ID',
      dataIndex: 'kefu_id',
      key: 'kefu_id',
    },
    {
      title: '客服编码',
      dataIndex: 'kefu_code',
      key: 'kefu_code',
    },
    {
      title: '客服名称',
      dataIndex: 'kefu_name',
      key: 'kefu_name',
    },
    {
      title: '客服头像',
      dataIndex: 'img',
      key: 'img',
      render: (item: any) => {
        return (
          <img
            src="http://fangadmin.shbwyz.com/static/common/images/kefu.jpg"
            alt=""
          />
        );
      },
    },

    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
    },
    {
      title: '在线状态',
      dataIndex: 'online_status',
      key: 'online_status',
      render: (item: any) => {
        return item === 2 ? (
          <span style={{ color: '#f00' }}>离线</span>
        ) : (
          <span style={{ color: '#099' }}>在线</span>
        );
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, item: any, index: any) => {
        return (
          <Space size="middle">
            <button
              onClick={() => edit(item, index)}
              style={{
                background: '#099',
                border: 'none',
                width: '60px',
                color: '#fff',
              }}
            >
              编辑
            </button>
            <button
              style={{
                background: 'rgb(227 36 189)',
                border: 'none',
                width: '60px',
                color: '#fff',
              }}
            >
              修改密码
            </button>
            <button
              onClick={() => del(item, index)}
              style={{
                background: 'rgb(36 227 208',
                border: 'none',
                width: '60px',
                color: '#fff',
              }}
            >
              删除
            </button>
          </Space>
        );
      },
    },
  ];

  const [size, setSize] = useState<SizeType>('large'); //
  const onSearch = (value: string) => {
    dispatch({ type: 'kefu/SEARCH', value });
  };
  return (
    <div>
      {/* <h3>客服列表</h3> */}
      <p>搜索信息</p>
      <div className="inp">
        <ul>
          {/* <li><button>客服姓名</button><input type="text" /></li> */}
          <li>
            <Search
              placeholder="input search text"
              allowClear
              enterButton="Search"
              size="large"
              onSearch={onSearch}
            />
          </li>
          {/* <li><button>在线状态</button> 
          <select name="" id="">
            <option value="全选">所有</option>
            <option value="全选">在线</option>
            <option value="全选">离线</option>
            </select> </li> */}
        </ul>
      </div>
      <Button type="primary" size={size} onClick={addfn}>
        添加
      </Button>

      <div className="tabble">
        <Table rowKey="kefu_id" columns={columns} dataSource={customerlist} />
      </div>
      <Modal
        title="修改客服"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>
          客服名
          <input type="text" placeholder="王凯为大嘴巴子抽你" />
        </p>
      </Modal>
      <DelModel
        delModalshow={delModalshow}
        closeDelModel={closeDelModel}
        delIndex={delIndex}
        delkefuName={delkefuName}
      ></DelModel>
      <AddModel
        addModelshow={addModelshow}
        closeAddModel={closeAddModel}
      ></AddModel>
      <EditModel
        editModel={editModel}
        closeedit={closeedit}
        editItem={editItem}
        editIndex={editIndex}
      ></EditModel>
    </div>
  );
};
const mapStateToProps = ({ kefu: { customerlist } }: any) => {
  console.log(customerlist);
  return {
    customerlist,
  };
};

export default connect(mapStateToProps)(index);
